<template>
    <section class="main-white">
        <div>
            <search :items="searchs" @filter="onSearch" @export="onExport" />
        </div>
        <div class="pageBox">
            <div>
                <h3>渠道汇总</h3>
                <vxe-table border="none" align="center" show-header-overflow show-overflow :row-config="{ isHover: true }" :max-height="common.tableHeight(true, 9)" :data="state.tableOneData">
                    <!-- <vxe-column field="channelName" title="渠道名称"></vxe-column> -->
                    <!-- <vxe-column field="userNum" title="H5点击UV"></vxe-column> -->
                    <vxe-column title="H5点击UV">
                        <template #default="{ row }">
                            <span
                                class="curp"
                                @click="
                                    detailRef.open({
                                        type: 0,
                                        time: queryData(),
                                    })
                                "
                            >
                                {{ row.userNum || '0' }}
                            </span>
                        </template>
                    </vxe-column>
                    <!-- <vxe-column field="orderNum" title="下单用户量"></vxe-column> -->
                    <vxe-column title="下单用户量">
                        <template #default="{ row }">
                            <span
                                class="curp"
                                @click="
                                    detailRef.open({
                                        type: 1,
                                        time: queryData(),
                                    })
                                "
                            >
                                {{ row.orderNum || '0' }}
                            </span>
                        </template>
                    </vxe-column>
                    <vxe-column title="审核通过用户量">
                        <template #default="{ row }">
                            <span
                                class="curp"
                                @click="
                                    detailRef.open({
                                        type: 5,
                                        time: queryData(),
                                    })
                                "
                            >
                                {{ row.auditPassNum || '0' }}
                            </span>
                        </template>
                    </vxe-column>
                    <!-- <vxe-column field="rentNum" title="实际租用用户量"></vxe-column> -->
                    <vxe-column title="实际租用用户量">
                        <template #default="{ row }">
                            <span
                                class="curp"
                                @click="
                                    detailRef.open({
                                        type: 2,
                                        time: queryData(),
                                    })
                                "
                            >
                                {{ row.rentNum || '0' }}
                            </span>
                        </template>
                    </vxe-column>
                    <!-- <vxe-column field="rentNum" title="逾期用户量"></vxe-column> -->
                    <vxe-column title="逾期用户量">
                        <template #default="{ row }">
                            <span
                                class="curp"
                                @click="
                                    detailRef.open({
                                        type: 2,
                                        time: queryData(),
                                    })
                                "
                            >
                                {{ row.overNum || '0' }}
                            </span>
                        </template>
                    </vxe-column>
                    <vxe-column field="totalAmount" title="总成本"></vxe-column>
                    <vxe-column field="actualAmount" title="实际租用成本"></vxe-column>
                </vxe-table>
            </div>
            <div class="botBox">
                
                <page-wrapper @get-data="getData" ref="pageRef">
                    <template v-slot:default="props">
                        <vxe-table ref="tableRef" align="center" :loading="props.loading" :data="props.tableData.records" :max-height="common.tableHeight(true, 8)" highlight-hover-row round stripe border>
                            <vxe-column field="reportDate" title="统计日期"></vxe-column>
                            <vxe-column field="channelName" title="渠道名称"></vxe-column>
                            <!-- <vxe-column field="userNum" title="H5点击UV"></vxe-column> -->
                            <vxe-column title="H5点击UV">
                                <template #default="{ row }">
                                    <span
                                        class="curp"
                                        @click="
                                            detailRef.open({
                                                row: row,
                                                type: 0,
                                                query: queryData(),
                                            })
                                        "
                                    >
                                        {{ row.userNum || '0' }}
                                    </span>
                                </template>
                            </vxe-column>

                            <!-- <vxe-column field="orderNum" title="下单用户量"></vxe-column> -->
                            <vxe-column title="下单用户量">
                                <template #default="{ row }">
                                    <span
                                        class="curp"
                                        @click="
                                            detailRef.open({
                                                row: row,
                                                type: 1,
                                                query: queryData(),
                                            })
                                        "
                                    >
                                        {{ row.orderNum || '0' }}
                                    </span>
                                </template>
                            </vxe-column>
                            <vxe-column title="审核通过用户量">
                                <template #default="{ row }">
                                    <span
                                        class="curp"
                                        @click="
                                            detailRef.open({
                                                row: row,
                                                type: 5,
                                                query: queryData(),
                                            })
                                        "
                                    >
                                        {{ row.auditPassNum || '0' }}
                                    </span>
                                </template>
                            </vxe-column>
                            <!-- <vxe-column field="rentNum" title="实际租用用户量"></vxe-column> -->
                            <vxe-column title="实际租用用户量">
                                <template #default="{ row }">
                                    <span
                                        class="curp"
                                        @click="
                                            detailRef.open({
                                                row: row,
                                                type: 2,
                                                query: queryData(),
                                            })
                                        "
                                    >
                                        {{ row.rentNum || '0' }}
                                    </span>
                                </template>
                            </vxe-column>
                            <vxe-column title="逾期用户量">
                                <template #default="{ row }">
                                    <span
                                        class="curp"
                                        @click="
                                            detailRef.open({
                                                type: 4,
                                                time: queryData(),
                                            })
                                        "
                                    >
                                        {{ row.overNum || '0' }}
                                    </span>
                                </template>
                            </vxe-column>
                            <vxe-column field="totalAmount" title="总成本"></vxe-column>
                            <vxe-column field="actualAmount" title="实际租用成本"></vxe-column>
                            <vxe-column title="外部成交" v-if="premission.outDataView">
                                <template #default="{ row }">
                                    <span
                                        class="curp"
                                        @click="
                                            () => {
                                                if (premission.outDataEdit) {
                                                    outDataVis = true;
                                                    outDataData = JSON.parse(JSON.stringify(row));
                                                } else {
                                                    return;
                                                }
                                            }
                                        "
                                    >
                                        {{ row.outDataNum || '0' }}
                                    </span>
                                </template>
                            </vxe-column>
                        </vxe-table>
                    </template>
                </page-wrapper>
            </div>
        </div>
        <detail ref="detailRef" />
        <el-dialog v-model="outDataVis" width="500px" title="修改外部成交" center destroy-on-close>
            <div style="display: flex; align-items: center">
                <span style="display: inline-block; width: 100px">外部成交:</span>
                <el-input-number v-model="outDataData.outDataNum" type="password" autocomplete="off" style="width: 100%" :min="0" />
            </div>
            <div style="display: flex; justify-content: flex-end; margin-top: 20px">
                <el-button type="primary" @click="submitOutData">确定</el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>
export default {
    name: '',
};
</script>
<script setup>
import { reactive, ref } from 'vue';
import { usePremission } from '@hooks';
import { ElMessage } from 'element-plus';
import Type from '@components/search/type';
import PageWrapper from '@components/PageWrapper.vue';
import Search from '@components/search/index';
import { common, service } from '@utils';
import Detail from './Detail';
const premission = usePremission({
    outDataEdit: 'outData:updata', //外部成交修改
    outDataView: 'outData:view', //外部成交查看
});
const state = reactive({
    tableOneData: [],
});
let queryForm = reactive({
    time: [],
});
const outDataVis = ref(false);
const outDataData = ref();
const detailRef = ref();
const tableRef = ref();
const pageRef = ref();
const searchs = ref([
    {
        type: Type.SELECT,
        key: 'channelCode',
        width: 6,
        placeholder: '请选择渠道名称',
        valueKey: 'channelCode',
        labelKey: 'channelName',
        data: [],
    },
    {
        type: Type.DATE_RANGE,
        width: 7,
        key: 'time',
        endPlaceholder: ' 结束日期',
        startPlaceholder: '开始日期',
    },
    {
        width: 11,
        type: Type.SEARCH_EXPORT_BUTTON,
        styles: 'float:right',
    },
]);
const selectData = async () => {
    const res = await service.channelConfigApi.queryChannelNameByLoginUser({});
    if (res) {
        searchs.value[0].data = res.data;
    }
};
selectData();
const queryData = () => {
    const query = { ...queryForm };
    if (query.time && query.time.length > 0) {
        query.startTime = query.time[0];
        query.endTime = query.time[1];
    }
    delete query.time;
    return query;
};
const submitOutData = async () => {
    if (outDataData.value.outDataNum != null) {
        let param = {
            id: outDataData.value.id,
            outDataNum: outDataData.value.outDataNum,
        };
        const res = await service.channelConfigApi.updateOutData(param);
        if (res) {
            ElMessage.success('修改成功');
            pageRef.value.refresh();
            outDataVis.value = false;
        }
    } else {
        ElMessage.error('数量不能为空');
    }
};
const onSearch = param => {
    queryForm = param;
    pageRef.value.refresh();
};
const onExport = async param => {
    let queryForm = queryData();
    const res = await service.channelConfigApi.channelReportExport(queryForm);
    res && common.export(res, '渠道统计.xlsx');
};
const getData = async ({ pageNum, pageSize }, cb) => {
    const query = queryData();
    const res = await service.channelConfigApi.channelReportPageQuery(pageNum, pageSize, query);
    state.tableOneData = res.extend ? [res.extend] : [{}];
    cb(res);
    setTimeout(() => {
        tableRef.value.scrollTo(0, 0);
    }, 0);
};
const getTabData = async () => {
    const query = queryData();
    const res = await service.bfqz.channelRportCount(query);
    state.tableOneData = res.data || [{}];
};
</script>
<style scoped lang="scss">
.pageBox {
    > div {
        background: #fff;
        padding: 20px;
        border-radius: 8px;
    }
    > div:first-child > h3 {
        text-align: center;
    }
    > div:last-child {
        margin-top: 20px;
    }
}
.botBox {
    padding-top: 20px;
}
.main-white {
    background: #f2f2f2;
}
.curp {
    cursor: pointer;
    color: cornflowerblue;
}
</style>
